<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <style>
        .header {
            padding-top: 70px;
        }

        .navbar-brand img {
            width: 150px;
        }

        .slider {
        }

        .main-latest {
        }

        .main-recommend {
        }

            .main-recommend li {
                margin-top: 7px;
            }

        .footer {
            height: 50px;
            line-height: 50px;
            ;
        }

        .logo {
            width: 100px;
        }

        .slider .carousel-item img {
            height: 400px;
        }

        @media only screen and (max-width:576px) {
            .main-recommend {
                display: none;
            }

            .slider .carousel-item img {
                height: 150px;
            }
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="row">
            <div class="col-sm-12 header">
                <nav class="navbar navbar-expand-md navbar-light bg-white fixed-top container ">
                    <a class="navbar-brand" href="#">
                        <img v-bind:src="web.Logo" />
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li v-bind:class="'nav-item '+(index==0?'active':'')" v-for="(item,index) in navs">
                                <a class="nav-link" v-bind:href="item.Href">{{item.Title}} <span class="sr-only">(current)</span></a>
                            </li>
                            <!--
                            <li class="nav-item">
                                <a class="nav-link" href="list.html">读书</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">玄幻
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">奇幻</a>
                                    <a class="dropdown-item" href="#">修真</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">其他</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#">穿越</a>
                            </li>-->
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                            <a href="Login.aspx" class="btn bg-white border-success my-sm-0 ml-md-4">登录</a>
								<a  href="Register.aspx" class="btn bg-white border-success my-2 my-sm-0  ml-md-2">注册</a>
                        </form>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 slider">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" v-bind:data-slide-to="index" v-for="(item,index) in sliders" v-bind:class="(index==0?'active':'')"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div v-bind:class="'carousel-item '+(index==0?'active':'')" v-for="(item,index) in sliders">
                            <img class="d-block w-100" v-bind:src="item.Img" alt="First slide">
                        </div>
                        <!-- <div class="carousel-item">
                            <img class="d-block w-100" src="img/15.jpg" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="img/13.jpg" alt="Third slide">
                        </div>-->
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

            </div>
        </div>
        <div class="row mt-3">
            <div class="col-sm-8 col-md-9 main-latest">
                <ul class="row list-unstyled">
                    <li class="col-6 col-sm-4  col-xl-3" v-for="item in latest">
                        <a v-bind:href="'detail.html?id='+item.Id">
                            <figure class="figure">
                                <img v-bind:src="item.Thumb" class="img-fluid figure-img rounded" />
                                <figcaption class="figure-caption text-center">{{item.Title}}</figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-md-3 main-recommend">
                <h5 class="font-weight-bold">热门推荐</h5>
                <ul class="list-unstyled">
                    <li v-for="(item,index) in hot">
                        <a v-bind:href="'detail.html?id='+item.Id"><span v-bind:class="'badge  mr-1 '+(index<badges.length?badges[index]:'badge-dark')">{{index+1}}</span>{{item.Title}}</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 footer text-center">
                Copyright&copy; 20019-2022
					<a href="#">GirlCMS文章系统</a> . All Rights Reserved
					<br>鄂ICP备17000979号-1</br>
            </div>
        </div>
    </div>
    <script>
        var jsondata = {
            web: { Logo: "img/美和易思1.png" },
            navs: [
                { "Id": 2, "Title": "首页", "Href": "/index.html" }
            ],
            sliders: [
                { "Id": 2, "Img": "/upload/13.jpg", "Title": "这是第一次", "Href": "的个" }
            ],
            latest: [
                { "Id": 11, "Title": "一位妻子列出的婚姻清单，感动了所有人", "ClassID": 0, "Thumb": "/upload/19.jpg", "Brief": "", "Content": "....", "Author": "多", "Added_time": "\/Date(1557847125000)\/" }
            ],
            hot: [
               { "Id": 11, "Title": "一位妻子列出的婚姻清单，感动了所有人", "ClassID": 0, "Thumb": "/upload/19.jpg", "Brief": "", "Content": "....", "Author": "多", "Added_time": "\/Date(1557847125000)\/" }
            ],
            badges: ["badge-primary", " badge-info", "badge-warning", "badge-danger", "badge-success", "badge-dark"]
        };
        var app = new Vue({
            el: "#app",
            data: jsondata,
            mounted: function () {//数据初始化完成之后干什么事情
                //获取网站系统数据
                this.$http.post("/SysListJson.aspx").then(function (res) {
                    console.log(res.data)
                    this.$set(this.$data, "web", res.data[0]);
                }, function (res) {
                    console.log("请求失败" + res)
                });

                //获取导航数据
                this.$http.post("/NavListJson.aspx").then(function (res) {
                    console.log(res.data)
                    this.$set(this.$data, "navs", res.data);
                }, function (res) {
                    console.log("请求失败" + res)
                });
                //获取幻灯片数据
                this.$http.post("/SliderListJson.aspx").then(function (res) {
                    console.log(res.data)
                    this.$set(this.$data, "sliders", res.data);
                }, function (res) {
                    console.log("请求失败" + res)
                });
                //获取最新文章数据
                this.$http.post("/LatestArticleListJson.aspx").then(function (res) {
                    console.log(res.data)
                    this.$set(this.$data, "latest", res.data);
                }, function (res) {
                    console.log("请求失败" + res)
                });
                //获取热门数据
                this.$http.post("/HotArticleListJson.aspx").then(function (res) {
                    console.log(res.data)
                    this.$set(this.$data, "hot", res.data);
                }, function (res) {
                    console.log("请求失败" + res)
                });
            }
        });

    </script>
</body>

</html>
